/**
 * Created by xiangjiayu on 2017/9/14. 小票
 */
import React from 'react'
import {
  Icon,
  Button,
  Row,
  Col,
  Input,
  Select,
  DatePicker,
  Cascader,
  Radio,
  Modal,
  Dropdown,
  Checkbox,
  Form,
  Upload
} from 'antd'
import AddressSelect from '../components/common/AddressSelect/AddressSelect'//省市级联

export default class Company extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      //上传图片
      previewVisible: false,
      previewImage: '',
      fileList: [],

    };
  }
  // 上传图片
  handleCancel = () => this.setState({previewVisible: false})
  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  }
  handleChange = ({fileList}) => this.setState({fileList})
  render () {
    const {previewVisible, previewImage, fileList} = this.state;
    const uploadButton = (
      <div>
        <Icon type="upload"/>
        <div className="ant-upload-text">上传</div>
      </div>
    );
    return (
      <div>
        <h3 className="title-h3">公司信息</h3>
        <div className="add-cont">
          <Row gutter={16}>
            <Col span={3} className="text-r">
              <div className="ant-form-item-label">
                <label><span className="span-left">公司LOGO</span></label>
              </div>
            </Col>
            <Col span={5}>
              <div className="ant-form-item-control">
                <div className="clearfix">
                  <Upload
                    action=""
                    listType="picture-card"
                    fileList={fileList}
                    onPreview={this.handlePreview}
                    onChange={this.handleChange}
                  >
                    {fileList.length >= 1 ? null : uploadButton}
                  </Upload>
                  <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{width: '100%'}} src={previewImage}/>
                  </Modal>
                </div>
              </div>
              <p className="tips-p">*请上传尺寸为96*96的图片</p>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={3} className="text-r">
              <div className="ant-form-item-label">
                <label><span className="span-left">公司电话</span></label>
              </div>
            </Col>
            <Col span={5}>
              <div className="ant-form-item-control">
                <Input size="large" placeholder="请输入公司电话"/>
              </div>
            </Col>
            <Col span={5}>
              <div className="error-tip"><Icon type="minus-circle-o"/>请输入联系电话</div>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={3} className="text-r">
              <div className="ant-form-item-label">
                <label><span className="span-left">公司名称</span></label>
              </div>
            </Col>
            <Col span={5}>
              <div className="ant-form-item-control">
                <Input size="large" placeholder="请输入公司名称"/>
              </div>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={3} className="text-r">
              <div className="ant-form-item-label">
                <label><span className="span-left">服务地址</span></label>
              </div>
            </Col>
            <Col span={5}>
              <AddressSelect/>
            </Col>
            <Col span={5}>
              <Input placeholder="详细街道地址" size="large" suffix={<Icon type="environment"/>}/>
            </Col>
            <Col span={5}>
              <Input placeholder="详细地址，如楼层/门牌号" size="large"/>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={3}></Col>
            <Col span={5}>
              <Button type="primary" size="large">保存</Button>
            </Col>
          </Row>
        </div>
      </div>
    )
  }
}